import { memo, useState } from 'react';
import { Button, Form, Input, Modal, Space } from 'antd';
import { insertGroupItem, type InsertGroupParam } from '../../http/chatting-group';

type CreateGroupProps = {
	open: boolean;
	onCancel: () => void;
	refreshList: () => void;
};
const CreateGroup = memo((props: CreateGroupProps) => {
	const { open, onCancel, refreshList } = props;

	const [loading, setLoading] = useState(false);
	const [form] = Form.useForm<InsertGroupParam>();

	const createGroup = () => {
		form.validateFields().then(async () => {
			setLoading(true);
			const formData = form.getFieldsValue();
			// groupType暂时默认私有：1
			await insertGroupItem({ ...formData, groupType: 1 }).finally(() => setLoading(false));
			onCancel();
			form.resetFields();
			refreshList();
		});
	};

	return (
		<Modal
			destroyOnClose
			centered
			maskClosable={false}
			keyboard={false}
			title="创建群聊"
			width={400}
			open={open}
			onCancel={() => {
				form.resetFields();
				onCancel();
			}}
			footer={
				<Space>
					<Button type="primary" loading={loading} onClick={createGroup}>
						创建
					</Button>
				</Space>
			}
		>
			<Form form={form}>
				{/* <Form.Item label="群类型" name="groupType" rules={[{ required: true }]}>
					<Radio.Group
						options={[
							{ value: 0, label: '公开' },
							{ value: 1, label: '私有' }
						]}
					/>
				</Form.Item> */}
				<Form.Item label="群名称" name="title" rules={[{ required: true }]}>
					<Input placeholder="请输入" maxLength={50} />
				</Form.Item>
			</Form>
		</Modal>
	);
});

export default CreateGroup;
